<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-back" @click="goBack">
				<text class="back-icon">‹</text>
			</view>
			<view class="nav-title">选择城市</view>
			<view class="nav-right">
				<text class="nav-icon">⋯</text>
				<text class="nav-icon">◎</text>
			</view>
		</view>

		<!-- 当前定位 -->
		<view class="location-section">
			<view class="location-label">当前定位:</view>
			<view class="location-city">{{ currentCity }}</view>
			<view class="relocate-btn" @click="relocate">
				<text class="relocate-icon">↻</text>
				<text>重新定位</text>
			</view>
		</view>

		<scroll-view scroll-y class="content-scroll">
			<!-- 热门城市 -->
			<view class="hot-cities">
				<view class="section-title">热门城市</view>
				<view class="city-grid">
					<view class="city-item" v-for="(city, index) in hotCities" :key="index" @click="selectCity(city)">
						{{ city }}
					</view>
				</view>
			</view>

			<!-- 城市列表 -->
			<view class="city-list">
				<view class="city-section" v-for="(section, index) in citySections" :key="index">
					<view class="section-title">{{ section.letter }}</view>
					<view class="city-item-list">
						<view class="city-item" v-for="(city, idx) in section.cities" :key="idx"
							@click="selectCity(city)">
							{{ city }}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				currentCity: '焦作市',
				hotCities: ['北京市', '北京市', '北京市', '南京市', '南京市', '南京市', '武汉市', '武汉市', '武汉市', '深圳市', '深圳市', '深圳市'],
				citySections: [{
						letter: 'A',
						cities: ['安庆市', '安阳市', '安顺市', '鞍山市', '安康市']
					}
					// 可以添加更多字母分组
				]
			};
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			relocate() {
				uni.getLocation({
					success: (res) => {
						// 根据经纬度获取城市信息
						uni.showToast({
							title: '定位成功'
						});
					}
				});
			},
			selectCity(city) {
				// 选择城市后返回上一页
				const pages = getCurrentPages();
				const prevPage = pages[pages.length - 2];
				if (prevPage) {
					prevPage.$vm.selectedCity = city;
				}
				uni.navigateBack();
			}
		}
	};
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100vh;
		background-color: #F5F7FA;
		display: flex;
		flex-direction: column;
	}

	.custom-nav {
		height: 44px;
		display: flex;
		align-items: center;
		background-color: #4A90E2;
		position: relative;
	}

	.nav-back {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		color: white;
		font-size: 32px;
		font-weight: bold;
		line-height: 44px;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		color: white;
		font-size: 18px;
		font-weight: 500;
	}

	.nav-right {
		width: 88px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 15px;
	}

	.nav-icon {
		color: white;
		font-size: 20px;
		margin-left: 10px;
	}

	.location-section {
		background-color: #4A90E2;
		padding: 15px;
		display: flex;
		align-items: center;
		color: white;
	}

	.location-label {
		font-size: 14px;
		margin-right: 10px;
	}

	.location-city {
		flex: 1;
		font-size: 16px;
		font-weight: bold;
	}

	.relocate-btn {
		display: flex;
		align-items: center;
		font-size: 14px;
	}

	.relocate-icon {
		font-size: 16px;
		margin-right: 5px;
	}

	.content-scroll {
		flex: 1;
		background-color: white;
		border-radius: 15px 15px 0 0;
		margin-top: -10px;
		padding: 15px;
	}

	.hot-cities {
		margin-bottom: 20px;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
	}

	.city-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.city-item {
		width: calc(33.33% - 7px);
		background-color: #F5F7FA;
		border-radius: 5px;
		padding: 10px;
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.city-list {
		margin-top: 20px;
	}

	.city-section {
		margin-bottom: 20px;
	}

	.city-item-list {
		display: flex;
		flex-direction: column;
	}

	.city-item-list .city-item {
		width: 100%;
		background-color: transparent;
		padding: 12px 0;
		text-align: left;
		border-bottom: 1px solid #F5F7FA;
	}

	.city-item-list .city-item:last-child {
		border-bottom: none;
	}
</style>